<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">

*{margin: 0;padding: 0;list-style: none;}
#div{width: 100px;height: 100px;position: absolute;left: 0;top: 0;cursor: pointer;background: black;}

    </style> 
</head>
<body>
<div id='div'></div>
<script type="text/javascript">
	

new Darg(div);
function Darg(dom){
	this.dom = dom;
	var _this = this;
	//alert(this);
	//alert(this.dom)
	this.dom.onmousedown = function(e){
	//	alert(this)
		_this.ev = e || event;
		_this.l = _this.ev.clientX - _this.dom.offsetLeft;
		_this.t = _this.ev.clientY - _this.dom.offsetTop;

		document.onmousemove = function(e){
			_this.ev = e || event;
			_this.dom.style.left = _this.ev.clientX - _this.l + 'px';
			_this.dom.style.top = _this.ev.clientY - _this.t + 'px';

		};

		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
		return false;
	}
}

</script>
</body>
</html>